<template>
  <div class="session-contain">
    <div class="action">
      <div class="list-card">
        <addFriend></addFriend>
        <div class="list-card-item">
          <div class="new-friend-avatar">
            <img src="../../assets/icon-image/newFriend.png" />
          </div>
          <div class="list-card-content">
            <div class="list-card-title">新好友</div>
            <div class="list-card-message"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="content"></div>
  </div>
</template>
  
  <script setup>
  import { ref, reactive, getCurrentInstance} from "vue";
import addFriend from "./addFriend.vue"
const { proxy} = getCurrentInstance();
</script>
  
  <style lang="scss" scoped>
  @import "@/assets/session.scss";
.new-friend-avatar {
  display: flex;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 8px;
  img {
    width: 100%;
    object-fit: cover;
  }
}
// .session-contain {
//   width: 100%;
//   height: 100%;
//   display: flex;
//   .action {
//     border-right: 1px solid #f1f2f4;
//     width: 275px;
//     height: 100%;
//     .list-card {
//       height: 100%;
//       .list-card-item {
//         cursor: pointer;
//         padding: 0 20px 0 0;
//         height: 68px;
//         display: flex;
//         align-items: center;
//         .list-card-content {
//           display: flex;
//           flex-direction: column;
//           justify-content: center;
//           align-items: center;
//           .list-card-title {
//             font-size: 14px;
//             color: #03081a;
//             display: block;
//             overflow: hidden;
//             text-overflow: ellipsis;
//             white-space: nowrap;
//           }
//         }
//       }
//     }
//   }
//   .content {
//     flex: 1;
//     width: 100%;
//     height: 100%;
//   }
// }
</style>